<template>
  <div class="template-main">
    <NavigationBarBack :title="title" />
    <div class="create-template-wrap">
      <div class="config-box">
        <el-form
          ref="form"
          :model="form"
          label-width="120px"
          size="small"
          class="new-fan-body"
          label-position="left"
        >
          <div class="config-settig-card">
            <div class="card-head bg_f9">
              <div class="card-title">基本设置</div>
            </div>
            <div class="card-body">
              <el-form-item label="模板名称：">
                <span>我的模板</span>
                <!-- <el-input
                  v-model="form.modelName"
                  size="small"
                  style="width: 300px"
                /> -->
              </el-form-item>
              <el-form-item label="模板类型：">
                <div class="mode-type-list">
                  <div
                    :class="['mode-item', item.type === form.type && 'active']"
                    v-for="(item, index) in modeList"
                    :key="index"
                    @click="onHandleCheckModeItem(item.type)"
                  >
                    <div class="type-icon">
                      <svg-icon :icon-class="item.icon" class-name="icon" />
                    </div>
                    <div class="type-title">{{ item.title }}</div>
                    <div class="type-context">{{ item.desc }}</div>
                  </div>
                </div>
              </el-form-item>
              <el-form-item label="消息退订：">
                <span>开</span>
                <!-- <el-switch size="small" v-model="form.switch" /> -->
              </el-form-item>
              <template v-if="form.switch">
                <el-form-item label="退订口令：">
                  <span>退订</span>
                  <!-- <el-input v-model="form.word" placeholder="" />
                  <div class="c_warning">
                    请确保退订话术中，明确告知客户关键词
                  </div> -->
                </el-form-item>
                <el-form-item label="退订话术：">
                  <span>不想再收到类似消息的推送，回复“退订”拒收</span>
                  <!-- <el-input
                    v-model="form.word"
                    type="textarea"
                    placeholder=""
                  /> -->
                </el-form-item>
              </template>
            </div>
          </div>
          <div class="config-settig-card">
            <div class="card-head bg_f9">
              <div class="card-title">发送计划</div>
            </div>
            <div class="card-body">
              <div class="plan-container">
                <sop-content :planList="form.planList" />
              </div>
            </div>
          </div>
        </el-form>
      </div>
    </div>
    <!-- 复制时出现 -->
    <div v-if="routeName=='TemplateCopyModal'" class="detailfooter bg_fff flexcenter">
      <el-button size="small">取消</el-button>
      <el-button size="small" type="primary" plain>复制</el-button>
      <el-button size="small" type="primary">复制并编辑</el-button>
    </div>
    <ChangeSendTimeDialog :visableIf.sync="showDialog" />
  </div>
</template>
<script>
import NavigationBarBack from "@/components/NavigationBarBack";
import MaterialContent from "@/components/MaterialContent";
import ChangeSendTimeDialog from "../components/changeSendTimeDialog";
import SopContent from "../components/SopContent.vue";
export default {
  data() {
    return {
      title: "",
      routeName:'',
      form: {
        modelName: "我的模板",
        timeType: 0,
        day: 1,
        type: 1,
        tagRadio: 0,
        switch: true,
        value1: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
        planList: [
          {
            id: 0,
            messageList: [
              {
                type: "text",
                contentType: "text",
                contentJson: "111",
                timenum: 10,
                until: 1,
                time: "08:00:00",
              },
            ],
          },
        ],
      },
      active: 0,
      modeList: [
        {
          icon: "sop-norm",
          title: "标准模板",
          desc: "手动创建SOP计划任务时调用",
          type: 1,
        },
        {
          icon: "sop-tag",
          title: "标签SOP模板",
          desc: "创建标签SOP自动规则时调用",
          type: 2,
        },
        {
          icon: "sop-customer",
          title: "新客户模板",
          desc: "创建新客户SOP自动规则时调用",
          type: 3,
        },
        {
          icon: "sop-group",
          title: "群模板",
          desc: "创建群SOP自动规则时调用",
          type: 4,
        },
      ],
      showDialog: false,
    };
  },
  components: {
    NavigationBarBack,
    MaterialContent,
    ChangeSendTimeDialog,
    SopContent,
  },
  created() {
    this.title = this.$route.meta.title;
    this.routeName = this.$route.name
    console.log("rpiteName:TemplateCopyModal", this.$route, routeName);
  },
  methods: {
    onHandleCheckModeItem(type) {
      this.form.type = type;
      this.form.planList = [
        {
          id: 0,
          messageList: [
            {
              type: "text",
              contentType: "text",
              contentJson: "111",
              timenum: 10,
              until: 1,
              time: "08:00:00",
            },
          ],
        },
      ];
    },

    handleAddPlan() {
      let index = this.form.planList.length;
      this.form.planList.push({
        id: index,
        messageList: [
          {
            type: "text",
            contentType: "text",
            contentJson: "111",
            timenum: 10,
            until: 1,
            time: "08:00:00",
          },
        ],
      });
    },

    handlePlanItem(item, index) {
      this.active = item.id;
      this.form.day = item.id + 1;
    },
  },
};
</script>
<style lang="scss" scoped>
.template-main {
  height: calc(100vh - 48px);
  overflow: auto;
  position: relative;

  .create-template-wrap {
    margin: 12px 12px 30px;

    .config-box {
      margin: 0 auto;
      width: 1200px;
      display: flex;
      flex-direction: column;

      .config-settig-card {
        background: #ffffff;
        margin-top: 12px;
        flex: 1 1;
        text-align: left;
        text-align: initial;
        color: rgba(0, 0, 0, 0.85);
        border-radius: 4px;
        background: #fff;
        font-size: 14px;

        .card-head {
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 1px solid #e9e9e9;

          .card-title {
            padding: 16px;
            color: rgba(0, 0, 0, 0.85);
          }
        }

        .card-body {
          padding: 24px;

          .mode-type-list {
            display: grid;
            grid-template-columns: 210px 210px 210px 210px;
            column-gap: 8px;

            .mode-item {
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              width: 210px;
              height: 136px;
              background: #fff;
              border-radius: 2px;
              border: 1px solid #e9e9e9;
              text-align: center;
              cursor: pointer;
              &.active {
                box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
                border: 1px solid #3070ff;
              }

              .type-icon {
                width: 40px;
                height: 40px;
                background: #ebf2ff;
                border-radius: 4px;
                display: inline-flex;
                align-items: center;
                font-size: 14px;
                justify-content: center;
              }

              .type-title {
                font-size: 14px;
                font-weight: 400;
                color: rgba(0, 0, 0, 0.85);
                line-height: 20px;
                margin: 12px 0 4px;
              }

              .type-context {
                font-size: 12px;
                font-weight: 400;
                color: rgba(0, 0, 0, 0.45);
                line-height: 20px;
                margin-bottom: 0;
              }
            }
          }

          .plan-container {
            min-height: 500px;
            border: 1px solid #e9e9e9;
            display: flex;
            height: 100%;

            .plan-left {
              width: 200px;
              border-right: 1px solid #e9e9e9;

              .plus-btn {
                width: 100%;
                height: 40px;
              }

              .sop-dov-item {
                display: flex;
                align-items: center;
                justify-content: space-between;
                color: #666;
                height: 32px;
                margin: 8px 0;
                padding-left: 8px;
                padding-right: 5px;
                border-radius: 2px;
                cursor: pointer;
                transition: all 0.3s;
                margin: 8px 12px;

                &.active {
                  background: #ebf2ff;
                }

                &:hover {
                  .btns {
                    display: flex;
                  }
                }

                .btns {
                  display: none;
                  align-items: center;
                  gap: 4px;
                }
              }
            }

            .plan-right {
              flex: 1 1;

              .plan-right-top {
                color: rgba(0, 0, 0, 0.85);
                font-weight: 500;
                font-size: 16px;
                background: #f9f9f9;
                border-bottom: 1px solid #e9e9e9;
                border-radius: 4px 4px 0 0;
                padding: 12px;
                font-size: 14px;
                line-height: 22px;

                .top-flex-rows {
                  display: flex;
                  align-items: center;
                  gap: 8px;
                }
                .top-flex-column {
                  ::v-deep .el-radio-group {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    gap: 8px;
                    .radio-item {
                      display: flex;
                      align-items: center;
                      gap: 8px;
                    }
                    .el-radio {
                      display: flex;
                      align-items: center;
                      font-size: 14px;
                      .el-radio__input {
                        margin-top: 4px;
                      }
                    }
                    .el-radio__input.is-checked + .el-radio__label {
                      color: rgba(0, 0, 0, 0.65) !important;
                      font-size: 14px;
                    }
                  }
                }
              }
              .material-body {
                padding: 20px;
              }
            }
          }
        }
      }
    }
  }
}
.myflex {
  display: flex;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  padding-left: 90px;
}
.detailfooter {
  position: sticky;
  width: 100%;
  bottom: 0;
  padding: 10px 16px;
  border-top: 1px solid #e9e9e9;
}
</style>